<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>参数监控</title>
  <link href="../../css/index.css" rel="stylesheet">
  <style>
    .status-watch {

    }
  </style>
</head>
<body>
  <div class="page-warp" id="time-config">
    <div class="message" :class="message.type" v-if="message.text">{{message.text}}</div>
    <div class="table-content">
      <table border="1">
        <tr>
          <th colspan="3" class="area-title">子区</th>
          <th colspan="12" class="cross-title">路口</th>
          <th rowspan="2" class="area-title">子区操作</th>
        </tr>
        <tr>
          <th class="area-title">子区</th>
          <th class="area-title">运行时段</th>
          <th class="area-title">运行</th>
          <th class="cross-title">路口</th>
          <th class="cross-title">计划周期</th>
          <th class="cross-title">当前周期</th>
          <th class="cross-title">需求周期</th>
          <th class="cross-title">计划相位差</th>
          <th class="cross-title">当前相位差</th>
          <th class="cross-title">主相位</th>
          <th class="cross-title">绿信比</th>
          <th class="cross-title">结婚</th>
          <th class="cross-title">锁方</th>
          <th class="cross-title">锁绿</th>
          <th class="cross-title">锁差</th>
        </tr>
        <tr v-if="loading.table">
          <th colspan="15">
            <img src="../../assets/jiazai.png" class="loading" />
          </th>
        </tr>
      </table>
    </div>
  </div>
</body>
<script src="../../js/vue3.js"></script>
<script src="../../js/api/secondEdition.js"></script>
<script>
    const { createApp, ref, nextTick, reactive, onMounted, onUnmounted, watch, computed } = Vue
    const app = createApp({
    setup() {
      const MESSAGE_TYPE = {
        'SUCCESS': 'success',
        'INFO': 'info',
        'ALERT': 'alert',
        'ERROR': 'error'
      }

      const loading = reactive({
        table: false, // 刷新时段
      })

      const message = reactive({
        type: '',
        text: ''
      })

      // 弹窗消息1.5秒消失
      watch(
        () => message.text,
        () => {
          if (message.text) {
            setTimeout(() => {
              message.text = ''
            }, 2000)
          }
        }
      )

      return {
        loading,
        message,
        MESSAGE_TYPE,
      }
    }
  })
  app.mount("#time-config");
</script>
</html>